<template lang="html">
  <div>
    <div class="top-nav" :class='{static:isStaticTop}'>
  		<div class="w1200 topBar">
  			<!-- <div class="selectCity fl" id="selectCity">
  				<i class="icon position"></i>杭州市 <i class="icon topArrow"></i>
  			</div>
  			<div class="cityBox" v-for='(item,index) in city'>
  				<span>{{item.name}}</span>
  			</div> -->
  			<div class="login fl">
          <em>欢迎访问本站!</em>
  				<a href="http://jieyouxiaoer.com/register.php">免费注册</a><a href="http://jieyouxiaoer.com/user.php">登录</a>
  			</div>
  			<div class="top-menu fr">
  				<a href="#">个人中心</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  				<a href="#">我的订单</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  				<a href="#">成为服务商</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  				<a href="#">服务商后台</a>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:{
    isStaticTop:Boolean()
  },
  data(){
    return{
      city:[]
    }
  },
  methods:{
    loadCity:function() {
      axios.get('http://cms.xinggeweb.com/api/action/foldersByParentId?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=lawyer_api&checkSum=YBrs&p={parentId:268}')
      .then((response) => {
        this.city=response.data.data.list;
      })
      .catch((error) => {
        console.log(error);
      })
    }
  },
  mounted(){
    // this.loadCity()
  }
}
</script>

<style lang="less">
.top-nav {
    width: 100%;min-width: 1200px;height: 30px;
    background-color: #d4d4d4;line-height: 30px;
	  color: #666666;z-index: 99;
    position: fixed;left: 0;top: 0;
    &.static{position: static;}
}
.top-bar{
	position: relative;height: 30px;
}
.top-nav .selectCity {
  font-size: 12px;color: #666666;padding:0 10px;
	width: 97px;height: 30px;line-height: 30px;
	cursor: pointer;border: 1px solid transparent;
	border-top:none;border-bottom:none;z-index: 99;
	position: relative;
}
#selectCity.active{
	background: #fff;border-color: #f5a41d;
}
.top-nav .selectCity i.position{
	width: 7px;height: 11px;
	background: url("../../assets/images/n-position-g.png");
	vertical-align: middle;margin-right: 6px;
}
.top-nav .selectCity i.topArrow{
	width: 8px;height: 4px;
	background: url("../../assets/images/n-topArrow-g.png");
	vertical-align: middle;margin-left: 3px;
}
#selectCity.active i.position{
	background: url("../../assets/images/n-position-y.png");
}
#selectCity.active i.topArrow{
	background: url("../../assets/images/n-topArrow-y.png");
}
.top-nav .cityBox{
	width: 230px;padding: 8px 0;
  position: absolute;left: 0;top: 29px;
	z-index: 88;font-size: 12px;background: #fff;
	border: 1px solid #f5a41d;
  // display: none;
  a{
    display: inline-block;width: 55px;color: #666666;
  	text-align: center;
    &:hover{color: #f5a41d;}
  }
}
.top-nav .login {
  font-size: 12px;margin-left: 0;//62px
  a {
      font-size: 12px;color: #666666;margin-left: 30px;
  }
}
.top-nav .top-menu {
    font-size: 12px;
    a {
        font-size: 12px;color: #666666;
    }
}
</style>
